<style lang="less">
.upload-image .el-upload--picture-card{
	background: transparent;
	.el-icon-plus{
		color: #fff;
	}
	
}
</style>
<template>
	<div class="comp-new">
		<el-form ref="newForm" :model="newForm" :label-width="120+'px'">
            <el-form-item label="被监听设备：">{{activeDevice.name}}</el-form-item>
            <el-form-item label="监听形式：">
                <el-radio-group v-model="newForm.model">
                    <el-radio :label="1">输出监听</el-radio>
                    <el-radio :label="2">现场监听</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="监听设备：" prop="monitordevid" :rules="[{ required: true, message: '请选择播放类型' }]">
                <!-- <el-input placeholder="请输入" v-model.trim="newForm.stuntType"></el-input> -->
                <el-select v-model="newForm.monitordevid" placeholder="请选择">
                    <el-option
                        v-for="item in deviceList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
		</el-form>
	</div>	
</template>
<script>
import { mapState } from 'vuex'
export default {
	name: 'audioPlay',
	props: {
		activeDevice: {
			type: Object,
			default(){
				return null
			},
		},
        companyIds: {
            type: Array,
            default () {
                return []
            }
        }
	},
	data () {
		return {
			newForm: {
                monitordevid: '',
                monitoreddevid: [],
                model: 1
            },
			loading: false,
            deviceList: []
		}
	},
    computed: {
		...mapState([
			'scale',
            'siteInfos'
		]),
    },
	created () {
        this.newForm.monitoreddevid = this.activeDevice.id
        this.getDeviceList()
	},
	methods: {
		getDeviceList () {
           this.$post('/fireFightingIOT/device/deviceListNew', {
                deviceClassify: 9,
                businessId: this.siteInfos.userType==1 ? this.companyIds.join(',') : ''
            }).then(res => {
            	this.loading = false
            	let data = res.data
                this.deviceList = data
            }, (err) =>{
            	this.loading = false
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
        },
		submitAction () {
            this.$refs['newForm'].validate((valid) => {
				if (valid) {
					let url = '/fireFightingIOT/ipbroadcast/monitor'
					this.$emit('submitting')
                    this.$ajax({
						url: url,
						method: 'post',
						data: this.newForm
					}).then( data => {
						this.$emit('success',data);
					}, error => {
						this.$message.error(error.msg);
						this.$emit('fail');
					})
				} else {
					return false;
				}
			});
            
		},
		cancelAction () {
			this.$emit('cancel');
		}
	},
}
</script>